﻿@page "/"
@using TrackSystem.UI.Server.Features
@attribute [TabItemOption(Text = "Index", Closable = false)]
@inject NavigationManager NavigationManager

<PageTitle>主页</PageTitle>

<div style="text-align:center">
    <h1>深海有缆机器人通用控制系统</h1>
</div>
 <Divider></Divider>
@*<FlipClock ViewMode="FlipClockViewMode.DateTime"></FlipClock> *@

<div class="button-container">
    @foreach (BtnItemProp item in BtnContentsSetting)
    {
        <Button
            Color="@item.clr"
            Size="Size.Large"
            IsOutline="true"
            OnClick="@(() => NavigationManager.NavigateTo($"/{item.url}"))">
            @item.name
        </Button>
    }
</div>

<div class="button-container">
    @foreach (BtnItemProp item in BtnContentsControl)
    {
        <Button Color="@item.clr"
                Size="Size.Large"
                IsOutline="true"
                OnClick="@(() => NavigationManager.NavigateTo($"/{item.url}"))">
            @item.name
        </Button>
    }
</div>

<br />

<div class="images img-ph mt-3">
    <div class="images-item">
        <ImageViewer Url="images/Track.png" ShowPlaceHolder="true" />
    </div>
</div>

<SurveyPrompt Title="开发" />

@code {
    IEnumerable<BtnItemProp> BtnContentsSetting = [
        new BtnItemProp(Color.Info,  "eqptable","设备设置"),
        new BtnItemProp(Color.Info,  "chntable","端口设置"),
        new BtnItemProp(Color.Info,  "snrtable","传感器设置"),
        new BtnItemProp(Color.Info,  "vardeftable","变量设置"),
        new BtnItemProp(Color.Info,  "logicdeftable","逻辑设置"),
        new BtnItemProp(Color.Info,  "loopdeftable","回路设置"),
        new BtnItemProp(Color.Info,  "slavedef","服务器设置"),
    ];

    IEnumerable<BtnItemProp> BtnContentsControl = [
        new BtnItemProp(Color.Success,  "equipcontrol","设备控制"),
        new BtnItemProp(Color.Success,  "iocontrol","传感器控制"),
        new BtnItemProp(Color.Success,  "logiccontrol","逻辑回路"),
        new BtnItemProp(Color.Success,  "loopcontrol","调节回路"),
        new BtnItemProp(Color.Success,  "regcontrol","寄存器"),
    ];
}

<style>
    /* 按钮容器样式 */
    .button-container {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        gap: 1rem; /* 按钮间距 */
        padding: 2rem;
        flex-wrap: wrap; /* 允许换行 */
    }

    .button {
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 0.5rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-family: 'Segoe UI', system-ui, sans-serif;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    /* 按钮悬停效果 */
    .button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        background: linear-gradient(135deg, #27408b 0%, #667eea 100%);
    }

    /* 按钮激活状态 */
    .button:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .button {
        width: 100%; /* 全宽按钮 */
        max-width: 200px;
    }
</style>
